<template>
    <div>
      <div class="row">
        <div class="col-xs-12">
          <div class="card">
            <div class="card-header">
                <div class="card-title">
                    <div class="title">Form Elements</div>
                </div>
            </div>
            <div class="card-body" :class="{loader:formData==''}">
              <!-- loader -->
              <div class="loader-container text-center color-white">
                  <div><i class="fa fa-spinner fa-pulse fa-3x"></i></div>
                  <div>Loading</div>
              </div>
              <!-- loader -->
              <!-- form -->
              <form class="form-horizontal" @submit.prevent="validateBeforeSubmit">
                <CustomForm  :formData='formData' ref="CustomForm"></CustomForm>
                <div class="form-group">
                  <div class="col-sm-10 col-sm-offset-2">
                  <button type="submit" class="btn btn-lg btn-primary"><i class="fa fa-save"></i> 保存</button>
                  </div>
                </div>
              </form>
              <!-- form -->
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import axios from 'axios'
import bus from '../components/bus'
export default {
  name: 'hello',
  data () {
    return {
      /*formData: [{
              type: 'input',
              val: ''
          },{
              type: 'password',
              data: {'sex':1},
              //process: this.click1,
              val: ''    
          },{
              type: 'radio',
              data: {'sex':1},
              //process: this.click1,
              val: ''    
          },{
              type: 'select',
              data: {'sex':1},
              //process: this.click1,
              val: ''    
          }, {
              type: 'checkbox',
              data: {'sex':1},

              //process: this.click2,
              val: ''
          }, {
              type: 'textarea',
              data: {'sex':1},

              //process: this.click2,
              val: ''
          }, {
              type: 'file',
              data: {'sex':1},

              //process: this.click2,
              val: ''
          }]*/
          formData: ''
    }
  },
  created() {
    bus.$on('errors-changed', (errors) => {
      this.errors.clear();
      errors.forEach((e) => {
        this.errors.add(e.field, e.msg, e.rule, e.scope);
      });
    });

    var vm=this;
    this.$store.dispatch('getFormContent', { params:{id:'3717',mid:'1'}}).then((response) => {
        console.log(response);
        vm.formData=response.data;
        vm.$nextTick(function () {
          $('select').select2();
        })
      })
  },
  mounted () {
      
     /* axios.get('?id=3717&mid=1').then(function (response) {
          console.log(response);
          vm.formData=response.data;
          vm.$nextTick(function () {
          $('select').select2();
        )}
      }).catch(function (response) {
        console.log(response);
      });*/
  //$('.hello').hide();
  },
  methods: {
        submit: function(event) {
            console.log(this.formData);
            //var formData = new FormData(event.target);
            
            axios.post('0', this.formData.data).then((response) => {
                // success callback
            }, (response) => {
                // error callback
            });

        },
        validateBeforeSubmit() {
          bus.$emit('validate')
          this.$validator.validateAll().then((result) => {
            if (result) {
              axios.post('0', this.formData.data).then((response) => {
                // success callback
              }, (response) => {
                  // error callback
              });
              return;
            }

            alert('Correct them errors!');
          });
          
        }
    }
}
</script>
